<template>
  <div class="div-show">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-col>
        <el-dropdown trigger="click" v-for="(item,j) in tableData[1].title" :key="j">
          <span class="el-dropdown-link">
            {{item}}         
          </span>
          111111111111111111111111111111111111111111111111111111
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
            <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-check-outline">蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
     
    </el-menu>
    
    <el-row>
      <el-col>
        <div class="block">
          <el-carousel trigger="click" height="2rem">
            <el-carousel-item v-for="(item,k) in tableData[0].fits" :key="k">
              <h3 class="img_h3">{{item}}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <div class="list-item" v-for="(item,y) in tableData[2].b" :key="y">
      <div class="list-box">
        <h3 class="title-name">{{item}}</h3>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          fits: ["fill", "contain", "cover", "none", "scale-down"]
        },
        {
          title: ["文章01", "文章02", "文章03", "文章04", "文章05", "文章01", "文章05", "文章05"]
        },
        {
          b: ["标题1", "标题2", "标题3", "标题4", "标题5"]
        }
      ]
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key);
      console.log(keyPath);
    }
  }
};
</script>

<style  scoped>
.img_h3 {
  vertical-align: middle;
  text-align: center;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

@media screen and (max-width: 420px) {
  .el-submenu {
    width: 20% !important;
    margin: 0 4% 0 0;
  }
  .el-dropdown{
  vertical-align: middle;
  padding:1% 5.5%
  }
  .el-dropdown-link{ 
   text-align: center;
    font-size: .14rem;
    background: red !important;
  }
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.div-show {
  position: relative !important;
}
.title-name {
  color: #999;
  text-align: center;
  font-weight: none;
  font-size: 0.18rem;
}

.list-box {
  width: 30%;
  float: left;
  border: 0.01rem solid #ccc;
  margin: 1.5%;
}
.el-dropdown{

  vertical-align: middle;
  font-size: .1rem;
  margin: 1%;
  
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
 
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 0px;
}
</style>
